<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 条件语句  通过真假条件进行渲染/展示元素，条件为真时就展示/渲染元素，条件为假时，就隐藏或者不渲染 -->

        <!-- v-if  单个元素 -->
        <span v-if="flag">看见我了吧</span>
        <!-- 多个元素  template不占位 -->
        <template v-if="flag">
            <h3>标题</h3>
            <p>显示内容</p>
            <p>显示价格</p>
        </template>

        <!-- v-else 不能单独使用，必须搭配v-if，v-if为假时，再走v-else -->
        <!-- 需求：生成一个随机数，随机数大于0.5时走if，小于0.5时走else -->
        <div v-if="Math.random() > 0.5">大于0.5</div>
        <div v-else>小于0.5</div>

        <!-- v-else-if 在v-if和v-else中间使用，可以连续使用多个 -->
        <!-- 需求：值为A时，标签展示A，值为B时展示B，值为C时展示C，都不满足时，展示不是ABC -->
        <div v-if="value === 'A'">A</div>
        <div v-else-if="value === 'B'">B</div>
        <div v-else-if="value === 'C'">C</div>
        <div v-else>不是ABC</div>


        <!-- 
            v-show 通过条件选择性的展示或者隐藏， 
            和v-if不同的是，v-show的元素时钟都是在DOM中的，
            只不过是通过css的display的值去控制元素的展示或者隐藏
         -->
        <span v-show="isShow">span标签</span>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    flag: true,
                    value: 'D',
                    isShow: true,
                }
            }
        }).mount('#app')




    </script>
</body>

</html>